
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增客服</title>
    
    <link rel="stylesheet" type="text/css" href="/assets/libs/layer/skin/layer.css" />
    <link rel="stylesheet" type="text/css" href="/assets/libs/amaze/css/amazeui.min.css" />

    
    <script type="text/javascript" src="/assets/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/libs/jquery/jquery.form.min.js"></script>
    <script type="text/javascript" src="/assets/libs/jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="/assets/libs/layer/layer.js"></script>
    <script type="text/javascript" src="/assets/libs/amaze/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="/assets/libs/bootstrap/bootstrap.min.css" />
    
    <link rel="stylesheet" type="text/css" href="/assets/css/admin/common.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/admin/reload.css" />
    <script type="text/javascript" src="/assets/js/admin/functions.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/admin/index.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/admin/index_me.css" />

    <script type="text/javascript" src="/assets/js/admin/common_me.js?v=1.5"></script>
    <script type="text/javascript" src="/assets/libs/push/pusher.min.js"></script>



<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .layui-form-label{
        float: left;
        display: block;
        padding: 9px 15px;
        width: 100px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }
</style>
<body>
<div style="width: 90%;height: 100%;margin:10px auto;">
    <fieldset  style="width: 70%;margin:5px auto;">
        <form id="img_form" class="am-form am-form-horizontal am-form-xs am-g-fixed" method="post">
            <div class="am-form-group am-form-file">
                <label class="layui-form-label">选择头像</label>

                <div class="am-u-sm-8 am-u-md-4 am-u-end">
                    <img class="am-circle" id="imgs" src="/assets/images/admin/avatar-admin2.png" width="50px"
                         height="50px">
                    <button type="button" class="am-btn am-btn-default am-btn-sm">选择图片</button>
                    <input type="file" name="img_head" id="img_head" accept="image/*" onchange="put()" multiple>
                </div>
            </div>
        </form>

        <div style="width: 70%;">
            <div class="layui-form-item" >
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="username" placeholder="1-16个字母或数字" autocomplete="off"  style="width:80%;" class="layui-input">
                    <span class="am-form-help" style="position: absolute;right: 10px;top:10px;">必填</span>
                </div>

            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" id="nickname" placeholder="2-20个字符" autocomplete="off"  style="width:80%;" class="layui-input">
                    <span class="am-form-help" style="position: absolute;right: 10px;top:10px;">可填</span>
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="password" placeholder="6-16个字符" autocomplete="off"  style="width:80%;" class="layui-input">
                    <span class="am-form-help" style="position: absolute;right: 10px;top:10px;">必填</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" id="password2" placeholder="确认密码" autocomplete="off"  style="width:80%;" class="layui-input">
                    <span class="am-form-help" style="position: absolute;right: 10px;top:10px;">必填</span>
                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" id="email"  placeholder="邮箱" autocomplete="off"  style="width:80%;" class="layui-input">
                    <span class="am-form-help" style="position: absolute;right: 10px;top:10px;">可填</span>
                </div>

            </div>


               <div class="layui-form-item" >
                <label class="layui-form-label">客服分组</label>
                <div class="layui-input-block">
                    <select id="classification" style="width: 200px;height: 38px;border-color: #ddd; ">
                      <option value="0">通用分组</option>
                     {foreach $class as $c}
                      <option value="{$c.id}">{$c.groupname}</option>
                     {/foreach}
                     </select> 
                    <span class="am-form-help" style="position: absolute;right: 10px;top:10px;">必填</span>
                </div>

            </div>

           
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit id="add_me">立即提交</button>
                </div>
            </div>
        </div>
    </fieldset>


</div>
</body>

<script type="text/javascript">


    var put = function () {

        $("#img_form").ajaxSubmit({
            url: '/admin/manager/uploadpic.html',
            type: "post",

            success: function (res) {

                if (res.code == 0) {
                    //返回图片路径
                    $("#imgs").attr('src', res.data);
                    //把路径存入cookie
                    $.cookie("pic", res.data);
                } else {

                    layer.msg(res.msg, {icon: 2});
                }

            }
        });
    }


    $("#add_me").on('click', function () {

        var path = $("#imgs").attr("src");
        var user = $("#username").val();
        var nick = $("#nickname").val();
        var pass1 = $("#password").val();
        var pass2 = $("#password2").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var groupid =$("#classification").val();

        $.ajax({
            url: "/admin/manager/registforservice.html",
            type: "post",
            data: {
                user_name: user,
                nick_name: nick,
                password: pass1,
                password2: pass2,
                email: email,
                avatar: path,
                groupid:groupid
            },
            dataType:'json',
            success: function (res) {

                if (res.code == 0) {

                    layer.open({
                        id: "kf_list",
                        type: 1,
                        title: '信息',
                        area: ['260px', '160px'],
                        content: '<center style="margin-top:20px;font-size:16px;">'+res.msg+'</center>',
                        btn: ['查看客服列表'],
                        yes: function () {
                            parent.location.reload();
                           
                        },
                    });
                } else {

                    layer.msg(res.msg);
                }
                delCookie("pic");
            }

        });

    });


    var init = function () {


        if ($.cookie("pic")) {


            $("#imgs").attr('src', $.cookie('pic'));
        }


    }

    window.onload = init();

    function delCookie(name) {
        var date = new Date();
        date.setTime(date.getTime() - 10000);
        document.cookie = name + "=a; expires=" + date.toGMTString();
    }


</script>
